<template>
  <el-col :span="4">
    <el-row type="flex" justify="space-between">
      <el-col>{{ treenode.manager }}</el-col>
      <!-- 下拉菜单 -->
      <el-col>
        <el-dropdown @command="operateDepts">
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <template v-if="!isok">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
            </template>
            <template v-else>
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item command="set">编辑部门</el-dropdown-item>
              <el-dropdown-item command="rem">删除部门</el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </el-col>
  <!-- 对话框 -->
</template>

<script>
import { departmentAPI } from '@/api/treetools'
export default {
  name: 'TreeTools',
  props: { // 父传子
    treenode: {
      type: Object,
      required: true
    },
    isok: {
      type: Boolean
    }
  },
  data() {
    return {
    }
  },
  methods: { // 方法
    operateDepts(type) { // 下拉菜单的点击事件
      if (type === 'add') { // 添加部门
        this.$bus.$emit('addFn', this.treenode, false)
      } else if (type === 'set') { // 编辑部门
        this.$bus.$emit('setFn', this.treenode, true)
      } else if (type === 'rem') { // 删除部门方法
        this.$confirm('您确定要删除该组织部门吗').then(() => {
          return departmentAPI(this.treenode.id)
        }).then(() => {
          // 只需要等到成功的时候 调用接口删除了 后端数据变化了 但是前端没变  重新获取
          this.$bus.$emit('removeFn') // 触发自定义事件
          this.$message.success('删除部门成功')
        })
      }
    }
  }
}

</script>
